import React from 'react';
import Menu from '@/components/common/menu';
import styles from '@/assets/css/index.module.css';

const Home = () => {
    const [keywords, SetKeywords] = React.useState('');
    const [hasMore, SethasMore] = React.useState(false)

    const OnRefresh = () => 
    {

    }

    const LoadMore = async () => 
    {

    }
    return (
        <>
            <div className={styles.heaerd}>
                <React.UI.Swiper loop autoplay>
                    <React.UI.Swiper.Item>
                        <React.Router.Link to="/coupon/info" >
                            <React.UI.Image src={require('@/assets/images/coupon.png')} height={213} fit='cover' />
                        </React.Router.Link>
                    </React.UI.Swiper.Item>
                    <React.UI.Swiper.Item>
                        <React.Router.Link to="/coupon/info">
                            <React.UI.Image src={require('@/assets/images/coupon.png')} height={213} fit='cover' />
                        </React.Router.Link>
                    </React.UI.Swiper.Item>
                </React.UI.Swiper>
            </div>

            <div className={styles.hotel_search}>
                <React.UI.Input value={keywords} onChange={SetKeywords} clearable placeholder="请输入关键词搜索" />
            </div>

            <div className={styles.hotellist}>
                {/* 下拉刷新 */}
                <React.UI.PullToRefresh onRefresh={OnRefresh}>
                    <div className={styles.item}>
                        <React.Router.Link to="/room/info">
                            <div className={styles.images}>
                                <div className={styles.swipers}>
                                    <img src={require('@/assets/images/hotel1.jpg')} alt="" />
                                </div>
                                <div className={styles.title}>暑假特价房</div>
                            </div>
                            <div>
                                <div className={styles.item_top}>
                                    <span>推广优惠</span>
                                    <span>月租惠选</span>
                                    <span>满减优惠</span>
                                    <span>节假日优惠</span>
                                </div>
                                <div className={styles.item_bot}>
                                    <div className={styles.font}>
                                        <span className={styles.price}>￥60.00/晚</span>
                                    </div>
                                </div>
                            </div>
                        </React.Router.Link>
                    </div>
                    <div className={styles.item}>
                        <React.Router.Link to="/room/info">
                            <div className={styles.images}>
                                <div className={styles.swipers}>
                                    <img src={require('@/assets/images/hotel1.jpg')} alt="" />
                                </div>
                                <div className={styles.title}>暑假特价房</div>
                            </div>
                            <div>
                                <div className={styles.item_top}>
                                    <span>推广优惠</span>
                                    <span>月租惠选</span>
                                    <span>满减优惠</span>
                                    <span>节假日优惠</span>
                                </div>
                                <div className={styles.item_bot}>
                                    <div className={styles.font}>
                                        <span className={styles.price}>￥60.00/晚</span>
                                    </div>
                                </div>
                            </div>
                        </React.Router.Link>
                    </div>
                    <div className={styles.item}>
                        <React.Router.Link to="/room/info">
                            <div className={styles.images}>
                                <div className={styles.swipers}>
                                    <img src={require('@/assets/images/hotel1.jpg')} alt="" />
                                </div>
                                <div className={styles.title}>暑假特价房</div>
                            </div>
                            <div>
                                <div className={styles.item_top}>
                                    <span>推广优惠</span>
                                    <span>月租惠选</span>
                                    <span>满减优惠</span>
                                    <span>节假日优惠</span>
                                </div>
                                <div className={styles.item_bot}>
                                    <div className={styles.font}>
                                        <span className={styles.price}>￥60.00/晚</span>
                                    </div>
                                </div>
                            </div>
                        </React.Router.Link>
                    </div>
                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>

            {/* 底部 */}
            <div className={styles.footer}>
                <Menu />
            </div>

        </>
    )
};

export default Home;